<template>
	<view class="zh-u-search display-flex align-center">
		<view class="search-box display-flex align-center flex" @click="clickBox">
			<image src="@/static/icons/search_icon.png" class="search-icon"/>
			<input v-if="props.type == 'input'" :focus="props.focus" :placeholder="props.placeholder" class="search-input flex" @input="onInput" v-model="message"/>
			<view v-else class="search-box-content flex">
				<template v-if="props.list && props.list.length > 0">
					<view class="search-box-item display-flex align-center" v-for="(item, index) in props.list" :key="item"  @click.stop="delOne(index)">
						<text class="search-item-text font-24">{{ item }}</text>
						<image src="@/static/icons/search_item_icon.png" class="search-item-icon"/>
					</view>
				</template>
				<view v-else class="font-24 font-999" >{{ props.placeholder }}</view>
			</view>
		</view>
		<text v-show="props.showSearchBtn" class="font-26 ml-40" @click.stop="search">搜索</text>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue'
	
	const message:any = ref('')
	
	const props = withDefaults(defineProps<{
		placeholder?:string
		showSearchBtn?:boolean
		type?:string
		list?:Array<string>
		modelValue?:string
		focus?:boolean
	}>(),{
		focus:false
	})
	
	watch(() => props.modelValue, () => message.value = props.modelValue)
	
	const emit = defineEmits(['click', 'search', 'delOne', 'update:modelValue'])
	
	const clickBox = () => {
		if(props.type != 'input') {
			emit('click')
		}
	}
	
	const search = () => {
		emit('search', message.value)
	}
	
	const onInput = (e:any) => {
		const value = e.detail.value
		emit('update:modelValue', value)
	}
	
	const delOne = (index:number) => {
		emit('delOne', index)
	}
</script>

<style lang="scss" scoped>
	.zh-u-search {
		background-color: $uni-bg-card-color;
		padding:20rpx 40rpx;
		.search-box {
			height:64rpx;
			background-color: #F7F7F7;
			border-radius: 32rpx;
			.search-icon {
				width: 24rpx;
				height:24rpx;
				margin-left: 40rpx;
			}
			.search-input {
				margin-left:14rpx;
				font-size: 26rpx;
				//color:#999;
			}
			.search-box-content {
				margin-left:14rpx;
				.search-box-item {
					display:inline-block;
					padding:0 20rpx;
					background: #7F7F81;
					border-radius: 22rpx;
					color:#fff;
					text-align:center;
					margin-right:15rpx;
					.search-item-text {
						font-size: 24rpx;
						height:44rpx;
						line-height: 44rpx;
					}
					.search-item-icon {
						width:14rpx;
						height:14rpx;
						margin-left:10rpx;
					}
				}
			}
		}
	}
</style>